<template>
  <!-- <div class="orderRecordsDetails appMainWarp" v-if="info != ''"> -->
  <div class="orderRecordsDetails appMainWarp">
    <el-row>
      <el-col :span="24">
        <div class="registered-container revenueDetail appMainWarp">
          <div class="infortant">
            <div class="boder">
              <el-form label-width="30px" label-position="left">
                <div class="boder">
                  <el-form label-width="30px" label-position="left">
                    <div class="applicant">
                      <div class="prominent" />
                      <span>患者信息</span>
                    </div>
                    <el-form-item>
                      <div class="orderItem">
                        <span>患者姓名:{{ patient.patient_name }}</span>
                      </div>

                      <div class="orderItem">
                        <span>就诊卡号:{{ patient.patient_card_no }}</span>
                      </div>

                      <div class="orderItem">
                        <span>业务类型:{{ patient.bill_type_no }}</span>
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </el-form>
            </div>
            <div class="boder">
              <el-form>
                <div class="applicant">
                  <div class="prominent" />
                  <span>支付系统订单信息</span>
                </div>
                <div style="margin-left:30px">
                  <div class="orderItem">
                    <span>交易院区：</span>
                    {{ patient.hospital_area_no }}
                  </div>
                  <div class="orderItem">
                    <span>支付时间：</span>
                    {{ patient.trans_time }}
                  </div>
                  <div class="orderItem">
                    <span>支付场景：</span>
                    {{ patient.system_no }}
                  </div>
                  <div class="orderItem">
                    <span>支付场景订单号：</span>
                    {{ patient.self_order_no }}
                  </div>
                  <div class="orderItem">
                    <span>交易金额：</span>
                    {{ patient.pay_fee }}
                  </div>
                  <div class="orderItem">
                    <span>交易类型：</span>
                    {{ patient.trans_type }}
                  </div>
                  <div class="orderItem">
                    <span>业务类型：</span>
                    {{ patient.bill_type_no }}
                  </div>
                  <div class="orderItem">
                    <span>支付方式：</span>
                    {{ patient.pay_style_no }}
                  </div>
                  <div class="orderItem">
                    <span>交易流水号：</span>
                    {{ patient.transcation_id }}
                  </div>
                  <div class="orderItem">
                    <span>订单状态：</span>
                    交易成功
                  </div>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

  <!-- <div v-else class="naDate">
    目前暂无数据
  </div>-->
</template>
<script>
import { orderRecordsDetail } from '@/api/detailed/index'

// import { healthregisteredInfo } from '@/api/page/experienceAppointment/index'

export default {
  name: 'RevenueDetail',
  data() {
    return {
      patient: {}
    }
  },
  mounted() {
    this.infoClick()
  },
  methods: {
    infoClick() {
      const that = this
      const params = {}
      params.id = this.$route.query.id
      params.type = this.$route.query.type
      orderRecordsDetail(params)
        .then(res => {
          that.patient = res.data.result
        })
        .catch(error => {
          that.$message({
            message: error
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.revenueDetail {
  background: #fff;
  .abnormal {
    width: 100%;
    height: 70px;
    background: rgba(237, 109, 61, 0.16);
    border: 1px solid rgba(243, 175, 61, 1);
    display: flex;
    align-items: center;
    padding-left: 49px;
    img {
      width: 34px;
      height: 34px;
    }
    span {
      font-size: 20px;
      // font-family:Microsoft YaHei;
      font-weight: bold;
      color: rgba(255, 77, 79, 1);
      line-height: 40px;
      padding-left: 30px;
    }
  }
  .infortant {
    padding: 20px 0 30px 47px;
  }
  .applicant {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
    .prominent {
      width: 4px;
      height: 24px;
      background: rgba(87, 158, 248, 1);
      border-radius: 2px;
    }
    span {
      padding-left: 19px;
      font-size: 20px;
      color: #232d50;
      font-weight: bold;
    }
  }
  .orderItem {
    display: inline-block;
    vertical-align: top;
    width: 380px;
    margin-top: 10px;
    span {
      font-size: 15px;
      color: #333;
      font-weight: 400;
    }
  }
}
.boder-two {
  border: 1px solid #e5e5e5;
}
.margincont {
  display: flex;
  justify-content: center;
  margin-right: 120px;
}
.img {
  width: 200px;
  height: 200px;
}
.imgflex + .imgflex {
  margin: 0 0 0 20px;
}
.el-textarea {
  width: 80%;
}
.el-button--medium {
  width: 200px;
  height: 40px;
}

.el-form-item {
  margin-bottom: 10px;
}
.naDate {
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}
.el-button--success{
  background-color: #e8f4ff;
  color: #579ef8;
  border: 1px solid #579ef8;
  }
</style>
<style>
.revenueDetail .el-form-item__content {
  margin-left: 23px !important;
}
.revenueDetail .logoWarp .el-textarea__inner {
  height: 116px;
  padding: 5px 15px;
  box-sizing: border-box;
}
</style>
